<template>
  <div class="spxx_tk_box">
    <div class="spxx_list">
      <div class="close" @click="close">
        <a-icon type="close" />
      </div>
      <div class="hed_seac">
        <div class="left_btn">
          <!-- <a-button type="primary" @click="submit">提交</a-button> -->
        </div>
        <div class="head_search">
          <a-input style="width:300px" @change="search" v-model="keywords" placeholder="请输入型号"></a-input>
        </div>
      </div>
      <div class="tab_box">
        <a-table
          @change="gethtdxhcx"
          :columns="columns"
          :pagination="false"
          :data-source="spxxdata"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        />
        <div class="left_btn">
          <a-button class="select_btn">
            已选
            <span class="sl_style">（{{selectedrecord.length}}）</span>
          </a-button>
          <a-button type="primary" @click="submit">确定</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
const columns = [
  {
    title: "型号规格",
    dataIndex: "SPBM",
    key: "SPBM"
  },
  {
    title: "品牌",
    dataIndex: "sccjc",
    key: "sccjc"
  },
  {
    title: "计量",
    dataIndex: "jldw",
    key: "jldw"
  }
];
var spxxdata = [];
export default {
  data() {
    return {
      spxxdata,
      columns,
      //   rowSelection,
      selectedRowKeys: [],
      selectedrecord: [],
      keywords: "",
      pagination: {
        defaultPageSize: 6,
        showTotal: total => `共 ${total} 条数据`,
        total: 0,
        current: 1
      },
      xl_list: ""
    };
  },

  methods: {
    search() {
      this.selectedRowKeys = [];
      this.selectedrecord = [];
      this.gethtdxhcx(this.pagination);
      this.xl_list = {
        id: "search",
        ID_NUM: "",
        SPBM: "",
        XLID: "",
        XLQZ: "",
        jldw: "",
        money: 0,
        mxbz: "",
        num: 0,
        sccjc: "",
        xl: this.keywords,
        yqfhrq: ""
      };
      console.log(this.xl_list);
    },
    gethtdxhcx(pagination) {
      this.pagination.current = pagination.current;
      this.axios
        .post(
          this.$store.state.baseurl + "/wxapi/smt_bjdxhcx.php",
          qs.stringify({
            page: this.pagination.current,
            pageSize: this.pagination.defaultPageSize,
            keywords: this.keywords,
            token: sessionStorage.getItem("smt_token")
          })
        )
        .then(res => {
          console.log("-----------", res);
          if (res.data.code == 103) {
            for (var i = 0; i < res.data.result.length; i++) {
              res.data.result[i].key = i;
              res.data.result[i].id = i;
              res.data.result[i].money = 0;
              res.data.result[i].num = 0;
            }
            this.spxxdata = res.data.result;
            this.pagination.total = res.data.totalDataNum;
          } else {
          }
          console.log(this.spxxdata);
        });
    },
    onSelectChange(selectedRowKeys, record) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      console.log("selectedRowKeys changed: ", record);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedrecord = record;
    },
    submit() {
      for (var i = 0; i < this.selectedrecord.length; i++) {
        this.selectedrecord[i].num = 0;
        this.selectedrecord[i].money = 0;
        // this.selectedrecord[i].id = i;
      }
      if (this.keywords != "" && this.selectedrecord == "") {
        this.selectedrecord.push(this.xl_list); //将搜索的值添加到列表中
      }
      for (var i = 0; i < this.selectedrecord.length; i++) {
        this.$store.state.selectedrecord.push(this.selectedrecord[i]);
      }
      for (var i = 0; i < this.$store.state.selectedrecord.length; i++) {
        this.$store.state.selectedrecord[i].id = i; //为删除做准备，为每条数据定唯一值
      }
      console.log(this.$store.state.selectedrecord);

      this.$parent.spxx_flag = false;
      this.$parent.sp_inp_flag = true;
      this.keywords = "";
    },
    close() {
      this.$parent.spxx_flag = false;
      this.$parent.sp_inp_flag = true;
      if (this.$parent.edit_ok == "edit_ok") {
        this.$store.state.selectedrecord = this.$parent.publicData.htData;
        console.log(this.$store.state.selectedrecord);
      } else {
        this.$store.state.selectedrecord = [];
      }
    }
  },

  created() {
    this.gethtdxhcx(this.pagination);
  }
};
</script>

<style lang='less'>
// 取报价单 spxx 找样式，用的是公共样式
// 取报价单 spxx 找样式，用的是公共样式
// 取报价单 spxx 找样式，用的是公共样式
// 取报价单 spxx 找样式，用的是公共样式
// 取报价单 spxx 找样式，用的是公共样式

.left_btn {
  .select_btn {
    background-color: #efefef;
  }
}

.htd_tk {
  //   display: none;
}
// .spxx_tk_box{
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 1000px;
//   background: rgba(0,0,0,.5);
// }
// .spxx_list {
//   position: absolute;
//   top: 0%;
//   left: 50%;
//   transform: translateX(-50%);
//   width: 35%;
//   //   height: 500px;
//   padding: 20px;
//   background: #fff;
//   z-index: 999;

//   .hed_seac {
//     text-align: right;
//     padding: 10px;
//     margin-right: 100px;
//     display: flex;
//     justify-content: space-between;
//   }

// }
</style>
